<!-- 年月日期插件 -->
<template>
    <div class="dateWrap" :style="pageType == 4 ? 'z-index:101' : ''">
        <div class="dateResult" @click="clickData" htmdEvt="clickMon_btn">
            <div class="selectResult">
                <span class="date" :style="alreadyClick ? 'color:#FF6500' : ''">2020年{{nowDate}}月</span>
                <!-- 箭头 -->
                <span :class="[alreadyClick ? 'top' : 'angle']"></span>
            </div>
        </div>

        <!-- 浮层 -->
        <div class="datePop" v-if="showPop">
            <ul class="dateUl">
                <li class="dateLi" v-for='(item, index) in dateLi' :style="item.name == nowDate ? 'color:#FF6500' : ''" @click="offPop(item.name,item.dataV)" htmdEvt='mon_btn'>2020年{{item.name}}月</li>
            </ul>
        <img src="../img/common/triangle.png" class="triangle">
        </div>
        
    </div>
</template>

<script>
export default {
    name: 'dateWrap',
    props: {
        checkData: { //选中的时间
            type: String
        },
        controlPop:{
            type: Boolean
        },
        pageType:{
            type: String
        }
        // dateLi:{ //返回按钮传参
        //     type: Array,
        //     default () {
        //         return []
        //     }
        // },
    },
    data() {
        return {
            dateLi: [{name:'1', dataV:'01'},
                {name:'2', dataV:'02'},
                {name:'3', dataV:'03'},
                {name:'4', dataV:'04'},
                {name:'5', dataV:'05'},
                {name:'6', dataV:'06'},
                {name:'7', dataV:'07'},
                {name:'8', dataV:'08'},
                {name:'9', dataV:'09'},
                {name:'10', dataV:'10'},
                {name:'11', dataV:'11'},
                {name:'12', dataV:'12'},],
            showPop: false,
            alreadyClick: false,
            nowDate: ''
        }
    },
    mounted(){
        // console.log( this.$utils.momentDate());
        // this.nowDate = this.$utils.momentDate()
        var date = new Date();
        this.nowDate = date .getMonth()+1;
        // this.nowDate = 12
        this.dateLi = this.dateLi.slice(4,this.nowDate).reverse()
        // console.log('....',this.dateLi)
        console.log('99999',this.pageType)
    },
    methods: {
        // 点击打开气泡窗
        clickData(){
            console.log('打开气泡弹窗')
            let arr = 2222222
            this.showPop = !this.showPop
            this.alreadyClick = !this.alreadyClick
            this.$emit('getData')
        },
        // 关闭气泡窗
        offPop(val,mon){
            console.log(val)
            this.nowDate = val
            this.showPop = false
            this.alreadyClick = false
            this.$emit('getData',mon,val)
        },
        offFarther(){
            this.showPop = false
            this.alreadyClick = false
        }
    },
    watch: {
        checkData:function(val){
            this.nowDate = val
        }
    },
};

</script>


<style lang="less">

.dateWrap {
    // margin-left: 1.0rem;
    display: inline-block;
    position: relative;
    width: 3.9rem;
    // z-index: 101;
    .dateResult{
        color: #91959E;

        .selectResult{
            font-size: 0;
        }

        .date{
            font-size: 0.65rem;
            
        }

        .angle{
            margin-left: 0.2rem;
            font-size: 0;
            width: 0;
            height: 0;
            border-width: 0.2rem;
            border-style: solid;
            border-color: #91959E transparent transparent transparent;
            // vertical-align: baseline;
            margin-top: 0.25rem;
            display: inline-block;
        }
        .top{
			margin-left: 0.2rem;
        	font-size: 0;
        	width: 0;
        	height: 0;
        	border-width: 0.2rem;
        	border-style: solid;
			border-color: transparent transparent #FF6500 transparent;
            margin-top: -0.25rem;
            display: inline-block;
		}
    }

}
.datePop{
    position: absolute;
    width: 5.6rem;
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.14);
    left: -0.5rem;
    font-size: .65rem;
    color: #1D212B;
    border-radius: .15rem;
    margin-top: .5rem;
    z-index: 200;
    li{
        padding: 1.05rem 0 .8rem 0;
        border-bottom: .025rem solid #E7E7E7;
        margin-left: 1rem;
        margin-right: 1rem;
        text-align: center;
    }
    &:last-child{
    	border-bottom: 0;
    }
}
// .datePop:before{
//     content: '';
//     width: 0;
//     height: 0;
//     border: .2rem solid transparent;
//     border-bottom-color: red;
//     position: absolute;
//     left: 3.75rem;
//     top: -8%;
//     // box-shadow: 0 2px 12px 0 rgba(0,0,0,0.14);
// }
.triangle{
    width: 5.6rem;
    position: absolute;
    top: -5%;
    left: 0;
}
</style>
